<template>
  <a-card :bordered="false" :bodyStyle="{ padding: '0', height: '100%' }" class="cat-wallpaper">
    <a-card class="py-8 ax_sticky_top mb-[4px]" v-if="isCategoryList">
      <a-flex justify="space-between">
        <div class="flex gap-4">
          <a-button size="small" type="primary" @click="isCategoryList = !isCategoryList">
            <LeftOutlined />
          </a-button>
          选择壁纸
        </div>
        <a-radio-group v-model:value="mode" :options="wallpaperMode"></a-radio-group>
      </a-flex>
    </a-card>
    <a-card v-else class="py-[8px] ax_sticky_top my-8">
      <div class="flex justify-between px-8">
        <div>
          <OrderedListOutlined />
          分类列表
        </div>
        <a-button @click="getCategory" :loading="loading">刷新</a-button>
      </div>
    </a-card>

    <a-card :loading="loading" :bodyStyle="{ padding: '0' }">
      <!-- 分类列表 -->
      <ul class="grid grid-cols-3 gap-4 p-[8px]" v-if="!isCategoryList">
        <li v-for="item in categoryList" :key="item.old_id" @click="selectCategory(item)">
          <a-image :preview="false" :src="item.icon" />
        </li>
      </ul>
      <!-- 实际图片 -->
      <template v-else>
        <ul class="grid grid-cols-3 gap-4 p-[8px]" v-if="wallpaperList.length > 0">
          <li v-for="item in wallpaperList" :key="item.id">
            <AxImage
              :preview="false"
              :src="item.image"
              v-if="mode === 'image'"
              @click="setWallpaper(item)"
            />
            <video
              class="w-[100%]"
              @click="setVideoWallpaper(item)"
              :src="item.file_url_10s"
              :poster="item.image"
              v-else
              :controls="false"
            ></video>
          </li>
        </ul>
        <a-empty v-else></a-empty>
      </template>
      <a-card class="footer" :body-style="{ padding: '4px 12px' }" :bordered="false">
        <a-pagination
          :total="query.total"
          :pageSize="query.pageSize"
          v-model:current="query.pageNum"
          @change="pageChange"
          v-if="isCategoryList"
          :show-total="total => `共:${total}条`"
        ></a-pagination>
      </a-card>
    </a-card>
  </a-card>
</template>

<script setup lang="ts">
import { getCatWallpaper } from '@/api/modules/public/wallpaper';
import { setBackground } from '@/store/page/utils';
import { CATEGORY_URL, http, wallpaperMode } from '../data/cat.wallpaper';
import { type WallpaperCategory, type WallpaperDetail } from '../data/types';
import { useQuery } from '@/utils/common/hooks';

const isCategoryList = ref(false);
const wallpaperList = ref<WallpaperDetail[]>([]);

const loading = ref(false);

const mode = ref<'image' | 'video'>('image');

const query = useQuery<WallpaperCategory>()
const categoryList = ref<WallpaperCategory[]>();

const selectCategory = async (item: WallpaperCategory) => {
  loading.value = true;
  query.value.category = item.show_name;
  await getWallpaperList();
  isCategoryList.value = !isCategoryList.value;
  loading.value = false;
};

const getCategory = async () => {
  loading.value = true;
  const { data } = await http.get(CATEGORY_URL);
  categoryList.value = data.data;
  loading.value = false;
};

const getWallpaperList = async () => {
  try {
    loading.value = true;
    const { data } = await getCatWallpaper(query.value);
    const { list, total_count } = data.data.data;
    wallpaperList.value = list;
    query.value.total = total_count;
    loading.value = false;
  } catch (error) {
    loading.value = false;
  }
};
const setWallpaper = (item: WallpaperDetail) => {
  setBackground(item.image, 'cdn-image');
};

const setVideoWallpaper = (item: WallpaperDetail) => {
  setBackground(item.file_url_10s, 'cdn-video');
};

const pageChange = (pageNum: number, pageSize: number) => {
  query.value.pageNum = pageNum;
  query.value.pageSize = pageSize;
  getWallpaperList();
};
onMounted(() => {
  getCategory();
});
</script>

<style lang="scss" scoped>
.cat-wallpaper {
  li {
    min-height: 80px;
  }
  video {
    background: var(--background-color);
  }
  .footer {
    position: sticky;
    bottom: 0;
  }
}
</style>
